<template>
  <div>
    <el-dialog width="60%" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-rizhi"></i>
        <span>{{title}}</span>
      </span>
      <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules" class="measurepaycompensation_detail_form">
        <el-row>
          <el-col :span="24">
            <el-form-item class="" label="工程类别" prop="allPathName" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.allPathName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程名称" prop="engineerName" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.engineerName" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="挂接概算清单" :label-width="formlabelWidth">-->
          <!--              <el-select class="select" style="width: 100%;" v-model="formBaseData.linkEstimate"   @change="changeSelect" >-->
          <!--                <el-option v-for="item in hookListArr" :key="item.id" :label="item.name" :value="item.id">-->
          <!--                </el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.unit" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="number" :label-width="formlabelWidth">
              <el-input size="small" type="number" v-model="formBaseData.number" placeholder="" @blur="blurInputEvent" @keydown.native="$publicJs.changeInputLimit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="isUserCompPrice" label="启用综合单价" :label-width="formlabelWidth">
              <el-radio-group v-model="formBaseData.isUserCompPrice">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="综合单价" prop="unitprice" v-if="formBaseData.isUserCompPrice=='1'" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.unitprice" placeholder="" @blur="blurInputEvent" type="number" @keydown.native="$publicJs.changeInputLimit">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="综合产值" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.comprehensiveOutput" placeholder="" :disabled="formBaseData.isUserCompPrice == '1'" @blur="blurInputEvent" type="number" @keydown.native="$publicJs.changeInputLimit">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序值" prop="pxRank" :label-width="formlabelWidth">
              <el-input size="small" v-model="formBaseData.pxRank" placeholder="" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <template>
          <el-button size="small" type="primary" @click="handleClickDeal('submit', {flag: 1})">
            <i class="iconfont icon-icon_save"></i> 确 定</el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import projectSectionInfo from "@/api/buss/common";
import sectionInfo from "@/api/buss/sectionInfo";
import msgUtil from "@/utils/msgUtil";

export default {
  name: "imageProgressBreak-detail",
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.chooseTreeData = value.chooseTreeData
      this.formBaseData.projectType = this.chooseTreeData.name
      // this.getDetail()
      if (this.detailType == 'build') {
        console.log(this.chooseTreeData)
        this.formBaseData.pid = this.chooseTreeData.id;
        this.formBaseData.allPathName = this.chooseTreeData.ownerAllPathName;
        this.formBaseData.projectId = this.chooseTreeData.projectId;
        this.formBaseData.sectionId = this.chooseTreeData.sectionId;
      }
      this.detailId = value.detailId === undefined ? '0' : value.detailId
      if (this.detailType == 'edit') {
        console.log();
        this.getDetail()
      }

    }
  },
  data() {
    return {
      searchYear: '',
      searchMonth: '',
      weekCountEdit: false,
      listOne: [],
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      fileList: [],
      companyTree: [], // 公司下拉
      projectTree: [], // 项目下拉
      sectionTree: [], // 标段下拉
      isLoading: false,
      actionType: '查看',
      title: '新增工程',
      isYz: false,//上报人公司类型 是否是业主
      //存放图片的数组
      fileListArray: [],
      chooseTreeData: {},
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      activeName: 'first', //
      detailActions: [], // 当前详情的操作项
      formShow: false, // 表单展示
      radioValue: '',//单选按钮选中的值
      formlabelWidth: '140px', // 表单左侧标题宽度
      selectList: {
        file: [], // 文件
        approver: [], // 审批人
        structureType: [], // 结构类型
      },
      fileSystem: {
        'one': {
          sys: 'buss',
          module: 'imageProgressBreak',
          part: 'one',
          compoName: 'fileOne'
        }
      }, // 文件系统的参数
      // 所有下拉框列表的集合
      // 表单基本信息内容
      formBaseData: {
        id: '',
        pid: '',
        projectId: '',
        sectionId: '',
        engineerName: '',
        linkEstimate: '',
        unit: '',
        number: '',
        isUserCompPrice: '',
        unitprice: '',

        comprehensiveOutput: '',
        allPathName: '',
        pxRank: '',
      },
      hookListArr: [{
        name: 'xxxx',
        id: '1'
      }, {
        name: 'yyyy',
        id: '2'
      }, {
        name: 'zzzz',
        id: '3'
      }],
      // 表单基本信息验证
      formBaseRules: {
        allPathName: [
          { required: true, message: '请前往列表页选择' + '工程类别', trigger: 'blur' },
        ],
        engineerName: [
          { required: true, message: '请输入' + '工程名称', trigger: 'blur' },
        ],
        unit: [
          { required: true, message: '请输入' + '单位', trigger: 'blur' },
        ],
        number: [
          { required: true, message: '请输入' + '数量', trigger: 'blur' },
        ],
        isUserCompPrice: [
          { required: true, message: '请选择' + '启用综合单价', trigger: 'blur' },
        ],
        unitprice: [
          { required: true, message: '请输入' + '综合单价', trigger: 'blur' },
        ],
        comprehensiveOutput: [
          { required: true, message: '请输入' + '综合产值', trigger: 'blur' },
        ],
        decompositionMonth: [
          { required: true, message: '请输入' + '分解月份', trigger: 'blur' },
        ],
        pxRank: [
          { required: true, message: '请输入' + '排序值', trigger: 'blur' },
        ],
        weekCount: [
          { required: true, message: '请输入' + '周数', trigger: 'blur' },
        ],
      },

    }
  },
  created() {
  },
  methods: {
    blurInputEvent() {
      if (this.formBaseData.number) {
        this.formBaseData.number = Number(this.formBaseData.number)
      }
      if (this.formBaseData.unitprice) {
        this.formBaseData.unitprice = Number(this.formBaseData.unitprice)
      }
      if (this.formBaseData.comprehensiveOutput) {
        this.formBaseData.comprehensiveOutput = Number(this.formBaseData.comprehensiveOutput)
      }
    },
    changeSelect(val) {
      console.log(val)
    },
    // 获取详情请求 api
    getDetail() {
      let id = this.detailId;
      this.$httpGet('buss/imageProgressBreak/getOne?id=' + id).then(res => {
        if (res.status == 1) {
          this.formBaseData = res.data
          this.$forceUpdate()
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch((res) => {
        console.log(res)
        msgUtil.error2("获取详情信息失败")
      })
    },

    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback, slient) {
      if (this.formBaseData.id == '') {
        this.isLoading = true
        this.$httpPost(`buss/imageProgressBreak/submit`, this.formBaseData).then(res => {
          if (res.status === 1) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          } else {

            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      } else {
        this.isLoading = true
        this.$httpPost(`buss/imageProgressBreak/resubmit`, this.formBaseData).then(res => {
          if (res.status === 1) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          } else {
            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      }
    },
    // 事件处理的api请求
    sealDealHttp(url, query, params, callback) {
      this.$httpPost(
        this.$store.state.httpHost.buss + url + query,
        params
      ).then(res => {
        if (res.data.status === 1) {
          if (callback) callback(res.data)
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(res => {
        console.log(res)
      })
    },

    changeMoney() {
      let sl = 0;
      let dj = 0;
      let zhcz = 0;

      if (this.formBaseData.number) {
        sl = Number(this.formBaseData.number);
      }
      if (this.formBaseData.unitprice) {
        dj = Number(this.formBaseData.unitprice);
      }
      zhcz = sl * dj;
      this.formBaseData.comprehensiveOutput = zhcz;
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          // 清空表单内容
          this.formBaseData = {
            id: '',
            pid: '',
            projectId: '',
            sectionId: '',
            engineerName: '',
            linkEstimate: '',
            unit: '',
            number: '',
            isUserCompPrice: '',
            unitprice: '',
            comprehensiveOutput: '',
            pxRank: '',
            allPathName: '',
          } // 表单基本信息内容
          this.listOne = []
          this.weekCountEdit = false
          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              // 提交详情
              this.submitDetail(flag, () => {
                this.$emit('reloadList')
              }, true)
            }
          });
          break
        // 删除
        case 'delete':
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-select.half {
  width: 250px;
}
.el-select.fill {
  width: 800px;
}

.el-input .el-select {
  width: 130px;
}
.fee_add {
  color: #008fe0;
  border-color: #008fe0;
  float: right;
  margin-bottom: 10px;
}
</style>
